<template>
  <div class="QRcode_container">
    <div class="QRbody">
      <div class="QR_container">
        <!-- <img src="" alt="" class="QR_img" id="qr"> -->
        <qrcode :value="url" :options="{ size: 200 }"></qrcode>
        <!-- <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portal/QRcode.png" alt="" class="QR_img"> -->
      </div>
      <div class="QR_content">微信扫一扫</div>
      <!-- <div class="id_number_container">
        <div class="id_number_content">
          <span id="name">{{ org }}</span>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { wxshare } from "common/mixin";
import VueQrcode from "@xkeshi/vue-qrcode";
import { mapGetters } from "vuex";

export default {
  mixins: [wxshare],
  data() {
    return {
      size: 300,
    };
  },
  computed: {
    ...mapGetters(["tpcode", "phone", "org"]),
    url: function () {
      return `http://fzsywx.zhanwangjkgl.com/?tpAdminCode=${this.tpcode}`;
    },
  },
  components: {
    qrcode: VueQrcode,
  },
};
</script>
<style lang="less">
.QRcode_container {
  background-image: url(http://yn-oa.oss-cn-shanghai.aliyuncs.com/static/static/zw/img/3.png);
  background-size: cover;

  .QR_container {
    text-align: center;
    padding-top: 10rem;
  }

  .QR_img {
    width: 50%;
    border: 4px solid #030000;
  }
  .QR_content {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-family: "微软雅黑";
    color: #030000;
  }

  .id_number_container {
    text-align: center;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    width: 9.5rem;
    height: 1.6rem;
    background: #e2e1e1;
  }

  .id_number_content {
    height: 1.6rem;
    line-height: 1.6rem;
    color: #868383;
    font-size: 1rem;
    font-family: "微软雅黑";
  }
}
</style>
